/*
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-07-05 15:28:31
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-07-08 16:33:27
 * @Description:
 */
const genBase64Data = ({ content, time }) => {
  const can = document.createElement('canvas')

  can.width = 400
  can.height = 200
  const cans = can.getContext('2d')
  cans.rotate((-25 * Math.PI) / 180)
  cans.font = '14px Vedana'
  cans.fillStyle = 'rgba(200, 200, 200, 0.50)'
  cans.textAlign = 'left'
  cans.display = 'flex'
  cans.flexDirection = 'column'
  cans.textBaseline = 'Middle'
  cans.fillText(content, can.width / 20 + 15, can.height)
  cans.fillText(time, can.width / 20, can.height + 30)

  return can.toDataURL('image/png')
}

const createWaterDom = () => {
  let waterDiv = document.getElementById('app_water_mark')

  if (waterDiv) {
    return waterDiv
  }

  waterDiv = document.createElement('div')
  waterDiv.style.pointerEvents = 'none'
  waterDiv.id = 'app_water_mark'
  waterDiv.style.pointerEvents = 'none'
  waterDiv.style.position = 'fixed'
  waterDiv.style.zIndex = '100000'
  waterDiv.style.top = '0px'
  waterDiv.style.bottom = '0px'
  waterDiv.style.left = '0px'
  waterDiv.style.right = '0px'
  waterDiv.style.width = '100%'
  waterDiv.style.height = '100%'

  return waterDiv
}

export const setWatermark = (data) => {
  const base64 = genBase64Data(data)
  const water_div = createWaterDom()
  water_div.style.background = `url(${base64}) left top repeat`
  document.body.appendChild(water_div)
}

export const clearWaterMark = () => {
  const waterDiv = document.getElementById('app_water_mark')
  if (waterDiv) {
    waterDiv.style.background = 'unset'
  }
}

export default setWatermark
